<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!doctype html>

<!--告诉浏览器当前网页使用的是中文，声明后将有便于外部程序对网页进行翻译，例如有道翻译等等-->
<html lang="zh-CN">

<head>

<!--编码格式为 utf-8(国际编码)-->
<meta charset="utf-8">

<!--设置页面关键字-->
<meta name="keywords" content="设置网站关键字">

<!--设置页面的描述-->
<meta name="description" content="设置页面的描述,建议在200字以内">

<!--设置浏览器优先使用急速模式-->
<meta name="renderer" content="webkit">

<!--禁止移动设备UC浏览器对字体大小的控制-->
<meta name="wap-font-scale" content="no">

<!--告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame(谷歌浏览器内嵌框架)-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<!--建立一个视觉窗口, 可视区域宽度等于设备宽度, 初始缩放比例为1倍, 最小缩放比例为1倍, 最大缩放比例为1倍, 禁止用户进行缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

<title>搜索页</title>

<link rel="stylesheet" href="<%=basePath%>/css/zhicwl.css">
<link rel="stylesheet" href="<%=basePath%>/css/zhicwl-bj.css">
<link rel="stylesheet" href="<%=basePath%>/css/zhicwl-zj.css">

<script src="<%=basePath%>/js/fontSize.js"></script>
<script src="<%=basePath%>/js/jquery-1.11.3.min.js"></script>

</head>

<body>

<style>
body{ background: #000;}
</style>
<header class="tuskop overflow-hidden padding-lr-15 padding-tb-15">
  <a class="float-left color1" href="###">排行榜</a>
  <a class="float-right color1" href="###">查看明细</a>
</header>

	
<!--雷达扫描搜索特效-->
<link rel="stylesheet" href="<%=basePath%>css/ldcm2.css"/>
<div class="container overflow-hidden">

  <div id="load">
    <div class="border1">
      <div class="pointer pointerAnim asmesr"></div>
			
      <!--附近店铺-->
      <div class="user">
      	<c:forEach var="item" items="${shopList}" varStatus="obj">     
		      <span class="user${obj.count%9}">${item.name }</span>  
		</c:forEach> 
      </div>
      <!--/附近店铺-->
      
      <!--中心LOGO-->
      <div class="bldtr">
        <div class="border2">
          <div class="border3">
            <div class="radar"><span class="avatar"><img src="http://demo.migong.org/2015/1030-1127/images/10.jpg" width="100%"></span></div>
          </div>
        </div>
      </div>
      <!--/中心LOGO-->
      
    </div>
    
    <div class="symksl color1">
      <strong id="minute_show" class="font-weight-normal">0</strong>:<strong id="second_show" class="font-weight-normal">12</strong> 
    </div>
    <div class="awldvd padding-lr-15">您还有<span>5</span>次机会</div>

		<!--获奖名单-->
		<script src="js/jquery.SuperSlide.2.1.2.js"></script>
		<div class="hjtistie padding-lr-15">
			<div class="bd">
				<ul>
					<li><a>城市寻宝用户**获得了 电视机一台</a></li>
					<li><a>城市寻宝用户**获得了 海尔空调一台</a></li>
					<li><a>城市寻宝用户**获得了 苹果手机一台</a></li>
					<li><a>城市寻宝用户**获得了 小米笔记本电脑一台</a></li>
					<li><a>城市寻宝用户**获得了 格力空调一台</a></li>
				</ul>
			</div>
		</div>
        
		<script type="text/javascript">
		jQuery(".hjtistie").slide({mainCell:".bd ul",autoPage:true,effect:"topLoop",interTime:1500,delayTime:150,autoPlay:true,vis:1});
		</script>   
    <!--/获奖名单--> 
    
    <!--<div class="anlswt button1 padding-lr1 margin-top5" style="display:inline-block;"><a href="###" class="background1 backg1-active color1 border-radius5">再试一次！</a></div>-->
    
  </div>
</div>

<!--弹出抽奖界面-->
<div class="tcslmd-fixed"></div>
	<div class="tcslmd">

    <img class="tcslmd-img" src="images/tcck.png">
  
    <!--关闭按钮-->
    <div class="guanbks"></div>
    <!--/关闭按钮-->    
  
    <div class="dtmksl">
      <img class="dtmksl-img" src="images/ksc/ksc41.png">
      <h4 id="shopName">皇后猪蹄俊县店</h4>
      <h5>发了一个红包，金额随机</h5>
      <h3>恭喜发财，大吉大利！</h3>
      <b><a href="#" onclick="bindRedPacket()">拆红包</a></b>
      <h6>新年好手气</h6>
    </div>
    
  </div>
</div>
<!--/弹出抽奖界面-->
弹出抽奖界面
<input type="text" id="longitude" value="${distanceVo.longitude}"/>
<input type="text" id="latitude" value="${distanceVo.latitude}"/>
<input type="text" id="distance" value="${distanceVo.distance}"/>
<input type="text" id="redPacketId" />

<script type="text/javascript">



//倒计时
intDiff = parseInt(11);//倒计时总秒数量
function timer(intDiff){
$(".user span").removeClass("flip shadow").hide();
	var timer1 = window.setInterval(function(){
	var day=0,
	hour=0,
	minute=0,
	second=0;//时间默认值		
	if(intDiff > 0){
		day = Math.floor(intDiff / (60 * 60 * 24));
		hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
		minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
		second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
	}
	
	if (second <= 9) second = '0' + second;
	$('#minute_show').html('<s></s>'+minute);
	$('#second_show').html('<s></s>'+second);
	intDiff--;
	
	//判断是否到达指定时间时间
	if(intDiff<0){
		clearInterval(timer1);	
		$(".pointer").removeClass("asmesr");
		$(".anlswt").css("visibility","visible");
		intDiff = parseInt(10);//倒计时总秒数量
		$(".tcslmd-fixed, .tcslmd").show();
		$(".tcslmd").addClass("dxlsmr");
	};
	}, 1000);
} 

function getRedPacket() {
	$.ajax({
        type : "post",  
        url : "http://localhost:8080/redPacket/getRedPacket",
        dataType:"json",
        data: {
        	longitude:$("#longitude").val()
        	,latitude:$("#latitude").val()
        	,distance:$("#distance").val()
        },
        success : function(msg) {
        	if (msg.code==0) {
        		$("#shopName").html(msg.shop.name);
        		$("#redPacketId").val(msg.redPacket.id);
        	} else if (msg.code==1) {
        		
        	} else if (msg.code==2) {
        		
        	}
        }
    });
}

function bindRedPacket() {
	var id = $("#redPacketId").val();
	window.location.href = "http://localhost:8080/redPacket/bindRedPacket?id="+id;
}

$(function(){
	timer(intDiff);
});	

$(".tcslmd-fixed, .tcslmd .guanbks").click(function(){
	$(".tcslmd-fixed, .tcslmd").hide();	
})

//雷达旋转扫描搜索条件
function leida(){
	//$(".pointer").addClass("pointerAnim");  //添加雷达旋转动画
	var timeout = 1000;  //每隔1000ms
	var index = 0;
	sqwe = setInterval(function(){
	if(index >= $(".user span").length){
	index = 0;
	clearInterval(sqwe);  //结束循环
	$(".user span").removeClass("flip").addClass("shadow")
	}else {
	$(".user span").eq(index++).fadeIn(timeout).addClass("flip")
	}
	},timeout);
}
$(function(){
	leida();
});		

getRedPacket();

//结果处理
/*
$(".anlswt").click(function(){
	clearInterval(sqwe);
	$("#minute_show").text("0");
	$("#second_show").text("12");
	timer(intDiff);
	$(".pointer").addClass("asmesr");	
	$(this).css("visibility","hidden")	
	$(".user span").removeClass("flip shadow").hide();
	leida();	
})
*/
</script>
<!--/雷达扫描搜索特效-->
  
<script src="<%=basePath%>/js/zhicwl.js"></script>
  
</body>
</html>